<!DOCTYPE html>
<html  lang="en">
    <head>
        <title>Document</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
        <style>
            @keyframes move-in {
                0%{
                    opacity: 0;
                    transform: translateX(100px);
                }
                100%{
                    opacity: 1;
                    transform: translateX(0px);
                }
            }
            .move-enter-active {
                animation-name: move-in;
                animation-duration: 1s;
            }
            .move-leave-active {
                animation-name: move-in;
                animation-duration: 1s;
                animation-direction: reverse;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="isCreate=!isCreate">clickMe</button>
            <transition name="move">
                <!-- diff算法：DOM树比对时发现div标签key不一致,会重新创建节点 -->
                <!-- transtion组件发现包裹的节点重新创建或渲染时，会触发过渡动画 -->
                <div v-if="isCreate" key="1">首页</div>
                <div v-else key="2">列表页</div>
            </transition>   
        </div>

        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    isCreate: true,
                },
            })
        </script>
    </body>
</html>